/*
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-05-29 14:55:33
 */
import { Button, Card, Form, Input, Select, Table, message,Modal } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import React, { useEffect, useState } from 'react'
import { ColumnsType } from 'antd/lib/table'
import { GetCityOrDistrictOrHospitalSResponse, GetHospitalListResponse, GetHospitalListStatusResponse, GetProvinceResponse } from '@/api/hospital/hospitalList'
import { ReqHospitalListItem, ReqHospitalListS, ReqProvinceOrCityOrDistrictOrHospitalS } from '@/api/hospital/model/hospitalListTypes'
import { useForm } from 'antd/lib/form/Form'
import { useNavigate } from 'react-router-dom'
let { Option } = Select
let {confirm}=Modal
export default function HospitalList() {
    let navigate=useNavigate()
    let [loading,setLoading]=useState<boolean>(false)
    let [form] =useForm()
    // 声明当前页面状态
    let [current,setCurrent]=useState<number>(1)
    // 声明页面显示条数状态
    let [pageSize,setPageSize]=useState<number>(5)
    // 声明所有数据状态
    let [total,setTotal]=useState<number>(0)

    // 声明医院列表数据状态
    let [hospital,setHospital]=useState<ReqHospitalListS>([])

    // 声明省的状态
    let [province,setProvince]=useState<ReqProvinceOrCityOrDistrictOrHospitalS>([])
    // 声明市的状态
    let [city,setCity]=useState<ReqProvinceOrCityOrDistrictOrHospitalS>([])
    // 声明区的状态
    let [district,setDistrict]=useState<ReqProvinceOrCityOrDistrictOrHospitalS>([])

    // 声明医院类型的状态
    let [hosType,setHosType]=useState<ReqProvinceOrCityOrDistrictOrHospitalS>([])
  // 表头
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      // dataIndex: 'id',
      width: 50,
      align: "center",
      render: (value: any, record: any, index: number) => {
        return index + 1
      }

    },
    {
      title: '医院logo',
      dataIndex: 'logoData',
      align: "center",
      width: 170,
      render:(key)=>{
          return <img style={{width:80}} src={`data:image/jpeg;base64,${key}`} alt="" />
      }

    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
      width: 100,
      align: "center",
    },
    {
      title: '等级',
      dataIndex: 'param',
      width: 150,
      align: "center",
      render:(key)=>{
        return <span>{key.hostypeString}</span>
      }
    },
    {
      title: '详细地址',
      dataIndex: 'param',
      align: "center",
      width: 240,
      render:(key)=>{
        return <span>{key.fullAddress}</span>
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 130,
      align: "center",
      render:(key)=>{
        return <span style={key==0?{color:'red'}:{color:'blue'}}>{key==0?"未上线":"已上线"}</span>
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: "center",
      width: 130,
    },
    {
      title: '操作',
      fixed: 'right',
      align: "center",
      width: 200,
      render:(row:ReqHospitalListItem)=>{
        return <>
          <Button type="primary" onClick={()=>{
              navigate(`/syt/hospital/hospitalList/detail/${row.id}`)
          }}>查看</Button>
          <Button type="primary" className='ml' onClick={()=>{
            navigate(`/syt/hospital/hospitalList/schedule/${row.hoscode}`)
          }}>排班</Button>
          {
            row.status? 
            <Button type="primary" danger className='ml' onClick={updateStatus(row)}>下线</Button>:
            <Button type="primary"  className='ml' onClick={updateStatus(row)}>上线</Button>
          }
        </>
      }
    }
  ]
  // 更新医院状态
  let updateStatus=({id,status,hosname}:ReqHospitalListItem)=>{
    return  ()=>{
      let str=status?"下线":"上线"
        confirm({
          title:`确定要把${hosname}--${str}吗?`,
          async onOk(){
            status=status? 0: 1
            await GetHospitalListStatusResponse(id,status);
            message.success("修改成功")
            getHospitalList()
          }
        })
    }
  }

  // 获取医院列表数据
  let getHospitalList=async (page=current,limit=pageSize)=>{
      setLoading(true)
      // 获取表单数据，进行选择查询
      let values=form.getFieldsValue();
      setHospital([])
      setCurrent(page)
      setPageSize(limit)
      let result=await GetHospitalListResponse({page,limit,...values});
      
      setHospital(result.content)
      setTotal(result.totalElements)
      setLoading(false)

      
  }


  // 模拟生命周期获取医院列表数据
  useEffect(()=>{
    getHospitalList()
  },[])

  // let timeId=setInterval(()=>{
  //   getHospitalList()
  // },1000*60)
        // 模拟生命周期获取省数据
  useEffect(()=>{
    async function main(){
      let results=await GetProvinceResponse();
      setProvince(results);
    }
    main()
    // return ()=>{
    //   clearInterval(timeId)
    // }
  },[])


        // 模拟生命周期获取医院状态数据
  useEffect(()=>{
    async function main(){
      let results=await GetCityOrDistrictOrHospitalSResponse("10000");
      setHosType(results);
    }
    main()
  },[])

  // 获取市份的方法
  let getCity=async (value: any)=>{ 
      form.setFieldsValue({cityCode:undefined,districtCode:undefined})
      setCity([])
      setDistrict([])
      let results=await GetCityOrDistrictOrHospitalSResponse(value)
      setCity(results);
      
  }

  // 获取区份的方法
  let getDistrict=async (value: any)=>{
    form.setFieldsValue({districtCode:undefined})
    let results=await GetCityOrDistrictOrHospitalSResponse(value)
    setDistrict(results);
  }

  // 清空搜索框
  let reset = ()=>{
    setCity([])
    setDistrict([])
    getHospitalList(1,5)
  }
  return (
    <Card>
      {/* 列表搜索 */}
      <Form
        form={form}
        layout="inline"
        onFinish={()=>{getHospitalList(1,5)}}
        onReset={reset}
      >
        <Form.Item
          name="provinceCode"

        >
          <Select onChange={getCity} style={{ width: 200 }} placeholder='请选择省'>
            {
              province.map(item=>{
                return <Option key={item.id} value={item.value}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item
          name="cityCode"
        >
          <Select  onChange={getDistrict} style={{ width: 200 }} placeholder='请选择市'>
          {
              city.map((item,index)=>{
                return <Option key={item.id} value={item.value}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item
          name="districtCode"
        >
          <Select style={{ width: 200 }} placeholder='请选择区'>
          {
              district.map(item=>{
                return <Option key={item.id} value={item.value}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>


        <Form.Item
          name="hosname"
        >
          <Input placeholder='医院名称' />
        </Form.Item>

        <Form.Item
          name="hoscode"
        >
          <Input placeholder='医院编号' style={{ width: 200 ,marginRight:200}} />
        </Form.Item>

        
        <Form.Item
          name="hostype"
        >
          <Select style={{ width: 200 }} placeholder='医院类型' className='mt' >
            {
              hosType.map(item=>{
                return <Option key={item.id} value={item.value}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>

        <Form.Item
          name="status"
        >
          <Select style={{ width: 200 }} placeholder='医院状态' className='mt'>
            <Option value={1}>已上线</Option>
            <Option value={0}>未上线</Option>
          </Select>
        </Form.Item>

        <Form.Item>
          <Button icon={<SearchOutlined />} type="primary" htmlType="submit" className='mt'>
            查询
          </Button>
          <Button className='ml mt' type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>


      {/* 医院表格 */}
      <Table className='mt'
        bordered
        rowKey={'id'}
        scroll={{ x: 1500 }}
        columns={columns}
        dataSource={hospital}
        loading={loading}

        // 分页功能
        pagination={
          {
            current,
            total,
            pageSize,
            pageSizeOptions: [5, 10, 20],
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total: number) => {
              return <span>总共：{total} 条</span>
            },
            onChange:getHospitalList
            // 分页发生改变时调用

          }
        } />

    </Card>
  )
}
